<template>
  <div class="Remote-download">
    <div
      class="Message-card"
      v-if="!sendMsg"
    >
      <button class="exit mdui-btn mdui-btn-icon" @click="exit()">
        <i class="mdui-icon material-icons">exit_to_app</i>
      </button>
      <h2 class="title">选择你要发送的文件</h2>
      <p class="tip"><small>发送文件后就会获得取件码</small></p>
      <!-- <input class="" type="text" v-model.number="shareCode" /> -->
      <input
        style="display: none;"
        type="file"
        ref="uploadInput"
        >
      <button
        class="download-btn mdui-color-blue-600 mdui-ripple"
        @click="select()"
      >
        提交
      </button>
    </div>
    <shareMsg
      v-else
      :shareCodeMsg='shareCodeMsg'
      @exit="exit"
    ></shareMsg>
  </div>
</template>

<script>
import apiConfig from '@/api/apiConfig'
import shareMsg from '@/components/ShareMsg'

export default {
  components: {
    shareMsg
  },
  data () {
    return {
      uploadMessage: '',
      sendMsg: false,
      shareCodeMsg: {}
    }
  },
  methods: {
    exit () {
      this.$emit('changPage', '')
    },
    select () {
      this.$refs.uploadInput.onchange = this.upload
      this.$refs.uploadInput.click()
    },
    async upload () {
      console.log('upload')
      const conf = apiConfig.guest.uploadFile(
        this.$refs.uploadInput.files,
        progressEvent => {
          const complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
          console.log('上传 ' + complete)
          this.uploadMessage = '上传 ' + complete
        }
      )
      try {
        const data = await this.$axios(conf)
        console.log(data)
        if (data.data.status === 200) {
          this.shareCodeMsg = data.data.data
          this.sendMsg = true
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.$refs.uploadInput.value = ''
      }
    }
  }
}
</script>

<style scoped>
:root {
  --theme-color: white;
  --bg-w-pure: rgb(65, 145, 245);
}
.download-btn {
  border-radius: 10px;
  cursor: pointer;
  display: block;
  font-size: 13.3px;
  height: 49px;
  margin-bottom: 20px;
  transition: background-color 0.25s, box-shadow 0.25s, color 0.25s,
    opacity 0.25s;
  width: 100%;
  max-width: 224px;
  /* ↑ button main */
  flex-grow: 2;
  background-color: var(--bg-w-pure);
  border: none;
  box-shadow: 0 5px 20px rgb(65 145 245 / 20%);
  color: var(--theme-color);
  outline: none;
}
.download-btn:active {
  background-color: var(--theme-color);
  box-shadow: 0 5px 30px rgb(65 145 245 / 50%);
  color: #fff;
}
.download-btn:hover {
  box-shadow: 0 5px 30px rgb(65 145 245 / 30%);
}
.exit {
  margin: 10px auto 10px 25px;
}
.Message-card {
  background: #ffffff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  border-radius: 1em;
  width: 80vw;
  max-width: 600px;
  margin: 0 auto 100px;
  padding: 5px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.Remote-download {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}
input {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
  color: rgb(65, 145, 245);
  font-size: 35px;
  letter-spacing: 10px;
  margin-bottom: 20px;
  padding: 15px 15px 15px 25px;
  position: relative;
  text-align: center;
  transition: all 0.25s;
  width: 200px;
}
input:focus,
input:hover {
  border: none;
  outline: none;
  border-bottom: 2px solid rgb(65, 145, 245);
}
</style>
